<html>

	<head>
	<title>Ejemplos de Jquery</title>
	
	<!-- Incluimos Jquery -->
	<style type="text/css">
		.resaltado {
			background-color: #D3D3D3/*lightgray*/;
			cursor: pointer;
		}
		
		.error {
			background-color:#FF9999;
			font-weight:bold;
			color:red;
		}
	</style>
	<!-- CSS GLOBAL -->
	<link rel="stylesheet" type="text/css" href="../css/reset.css" >
	<link rel="stylesheet" type="text/css" href="../css/global.css" >
	<link rel="stylesheet" type="text/css" href="css/main.css" >

	<script type="text/javascript" src="../js/jquery-1.7.1.js" ></script>
	
	<script  type="text/javascript">
		//CREAMOS LAS FUNCIONES QUE NECESITEMOS
		
		function escribirTelefono(campo, evento){
			//length permite conocer la longitud de una cadena
			//which en un evento de tipo key, nos permite conocer el cdigo de la tecla (no el caracter).
			if((campo.attr('value').length > 8) && (evento.which != 8 && evento.which != 0)){
				evento.preventDefault();
			}
			if((evento.which  < 48 || evento.which  > 57) && (evento.which != 8 && evento.which != 0)){
				evento.preventDefault();
			}
		}
		
		function escribirNombre(campo, evento) {
			if((evento.which  > 48 && evento.which  < 57) && (evento.which != 8 && evento.which != 0)){
				evento.preventDefault();
			}
		}
		
		jQuery.fn.correo=function() {
			if(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($(this).val())) {
				return true;
			} else {
				alert(‘No es correo electronico’);
				$(this).focus();
				return false;
			}
		}		
		//CUANDO EL DOCUMENTO ESTÉ PREPARADO
		$(document).ready(function(){
			var contactos = new Array();
			//Otra forma de asignar listener de eventos a los objetos.
			//Vamos a crear elementos de item de lista <li>. Si queremos que cuando se pase el ratn por encima, se resalten, lo que haremos ser aadir un listener.
			//Cuando aadimos un listener por el mtodo, por ejemplo, $("li").click, lo estamos añadiendo para elementos que YA EXISTEN. Si creamos elementos nuevos de tipo <li> no tendrn este listener.
			//Para crear un listener que se aplique a los elementos que creemos dinmicamente, utilizaremos .live('evento', funcion);
			$("#lista ul li").live('mouseenter mouseleave',function(e){
				 $(this).toggleClass('resaltado');
			});
			//como vemos, se pueden asignar varios eventos de una sola vez
			
			
			//Creamos el listener del botón
			$('#anadir_elemento').click(function(e){
				//Evitamos que envie el formulario y regargue la pagina
				e.preventDefault();
				
				var nombre = $("#nombre").attr("value");
				var telefono = $("#telefono").attr("value");
				var email = $("#email").attr("value");
								
				//Añadimos el elemento a la lista
				$("#lista ul").append("<li><span class='nombre' >" + nombre + "</span><span class='telefono'> " + telefono + "</span><span class='email'> " + email + "</span></li>");
				
				//vamos guardando en un array global los contactos
				contactos[contactos.length] = new Array(nombre, telefono, email);
				
				$("#numcontactos").text($("#lista ul li").size());
			});
			
			$('#quitar_elementos').click(function(e){
				if(confirm("¿Estas seguro de querer eliminar la lista?")) {
					$("#lista ul").empty();
					$("#numcontactos").text("");
				}
			});
		
			//En vez de preocuparnos de validar el mail hasta el final, lo que vamos a hacer es poner un listener al campo telefono, 
			//de tal forma que no deje escribir ms de 9 digitos
			//De paso, vemos como se asignan eventos con bind() (simplemente otra forma de asignar eventos, parecida a live(), pero para los elementos ya creados
			$('#telefono').bind('keypress',function(e){ 
				escribirTelefono($(this), e);
			});
			
			$('#nombre').bind('keypress',function(e){ 
				escribirNombre($(this), e);
			});

			$(document).keypress(function(e){
				//si el check de mostrar tecla pulsada esta activo mostramos la tecla pulsada
				if($('#idTeclasActivado').is(':checked')){
					alert(e.which);
				}
			});
		});
	
	</script>
	
	</head>
	<body>
		<div id="container" class="tipo1 redondeado sombra">
		<h1>Ejemplo agenda</h1>
		<input type="checkbox" id="idTeclasActivado" >Activar detecci&oacute;n de teclas<br>
		<div id="contenedor">
			<form id="agenda">
				<label for="nombre" >Nombre</label>
				<input type="text" name="nombre" id="nombre" >
				<label for="telefono">Telefono</label>
				<input type="text" name="telefono" id="telefono" >
				<label for="email">Email</label>
				<input type="text" name="email" id="email" >
				<input type="submit" name="anadir_elemento" value="A&ntilde;adir elemento" id="anadir_elemento" >
				<input type="button" name="quitar_elementos" value="Vaciar la lista" id="quitar_elementos" >
			</form>
		</div>
		<div style="clear: both;"></div>
		<div class="limpiar"></div>
		
		
			<div id="lista">
					<h2>Contactos (<span id="numcontactos"></span>)</h2>
					<ul></ul>
			</div>
			
			<div id="ejercicios">
			<h3>Ejercicios propuestos:</h3>
				
				<ul>
					<li>- En el par&eacute;ntesis al lado del t&iacute;tulo "contactos", mostrar el n&uacute;mero de contactos en la lista (m&eacute;todo size)</li>
					<li>- A&ntilde;adir un bot&oacute;n para vaciar la lista. El bot&oacute;n deber pedir confirmacin ( <strong>confirm()</strong> de javascript) </li>
					<li>- Implementar el control de expresi&oacute;n regular en el nombre (no se permiten n&uacute;meros), en el email y en el tel&eacute;fono. Todos los campos son requeridos. <br>
						Expresiones utilizadas: <br>/^[a-z A-Z]{3,30}$/<br>	/^[0-9]{9}$/<br>/[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/	</li>
				</ul>
			
			</div>
			
		</div>
		</body>
		
	
	
</html>